<template>
    <div class="register">
      <div>
        <img src="../assets//img/logo.png">
        <p>山羊听书</p>
      </div>
      <!-- 表单 -->
      <van-form @submit="onSubmit">
          <van-field 
              v-model="username" 
              name="uname" 
              label="用户名" 
              placeholder="请输入邮箱格式" />
  
        <van-field 
              v-model="password" 
              type="password" 
              name="upass" 
              label="密码" 
              placeholder="请输入"/>
  
        <van-field 
              v-model="password2" 
              type="password" 
              name="upass2" 
              label="确认密码" 
              placeholder="请输入"/>
  
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">立即注册</van-button>
        </div>
  
        <div class="tishi">
            <router-link class="link" to="/login"><span>已账号，马上登录?</span></router-link>
        </div>
      </van-form>
      <!--使用组件 跳转首页 -->
      <back-to></back-to>
    </div>
  </template>
<script>
// 导入组件
import BackTo from '@/components/BackTo.vue'
import { Toast , Dialog  } from 'vant'

// 打开页面时
// 初始化（获取存储在本地的所有用户信息）
let sky_users = []
let sky_users_str = localStorage.getItem("SKY_USERS")
if(sky_users_str){
  // 如果本地有存储用户信息，就把这个存储信息的字符串转成数组
  sky_users = JSON.parse(sky_users_str)
}

export default {
  data() {
    return {
      username: '',
      password: '',
      password2: ''
    };
  },
  // 注册组件
  components: {
    BackTo
  },
  methods: {

    // 点击“注册”的业务逻辑
    onSubmit(values) {
      console.log('submit', values);
      // 解构赋值
      let  {uname, upass, upass2} = values;
      // 判断输入框是否为空
      if(uname == "" || upass == "" || upass2 == "") {
        // 弹窗提示
        // Toast.fail('输入框不能为空');
        Toast('输入框不能为空~');
        return false;
      }
      // 把用户信息放在本地（客户端）
      // 这个账号仅仅在我的电脑才有作用
      let arr = sky_users.filter(item=> item.username == uname )

      // 如果数组的长度大于0 ，说明这个账号已经存在
      if(arr.length > 0) {
        Toast(`"${uname}"已存在，不需要重新注册`)
      }
      else {
        // 希望用户长度8-16个字符    邮箱格式
        let regExp = /^[0-9a-zA-Z_]{4,8}@qq.com$/
        if(!regExp.test(uname)) {
          Toast('请输入邮箱格式文本')
          return false
        }

        if(upass.length < 6) {
          Toast('密码需要6位字符以上')
          return false
        }

        if(upass != upass2) {
           Toast.fail('两次输入的密码不一致')
           return false
        }

        // 执行注册的逻辑
        let obj = {}
        obj.id = Math.random().toString().slice(2)+"_"+(new Date().getTime())
        obj.username = uname
        obj.password = upass

        // 把这个obj对象丢数组中
        sky_users.push(obj)

        // 再把这个数组转成字符串
        let str =  JSON.stringify(sky_users)
        localStorage.setItem('SKY_USERS',str);

        // 给用户反馈“注册结果”
        Dialog.alert({
        message: '注册成功，跳转登录。',
        }).then(() => {
          // on close
          // 跳转登录页
          this.$router.push({path: '/login'})
        });
        
      }
    },
  },
};
</script>

<style lang="less">
@import '../assets/css/varible.less';
.register {
  padding-top: 70px;
  .van-button--normal {
    background-color:  @bgColor;
    border: 0;
  }
  .link {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    // text-decoration: underline;
    
  }
  div{
      text-align: center;
      img{
        width: 100px;
        height: 100px;
        padding-bottom: 10px;
      }
      p{
        padding-bottom: 15px;
        color:#FA6205;
        font-weight: bold;
        font-family: a;
        font-size: 30px;
      }
    }
}
.tishi{
  a{
    span{
      font-size: 18px;
      font-family: a;
      font-weight: bold;
    }
  }
}
</style>
